import React, { Component } from 'react';
import {
	StyleSheet, Text, View, TouchableOpacity,
	PixelRatio, Image, FlatList, ScrollView
} from "react-native";
import { GLOBAL } from '../../config/global';
import { style } from '../../theme/style';
import { Common } from '../../component/common/Common.js';
import Dictionary from '../../utils/dictionary';
//import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';
import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from '../../utils/react-native-table-component/index';
import Utils, { isEmpty } from '../../utils/utils';
import MethodUtil from '../../utils/MethodUtil';
const scale = GLOBAL.SCALE;

export class RebateRulePage extends Component {
	static navigationOptions = ({ navigation, navigationOptions }) => {
		return {
			headerTitle: '规则明细',
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerRight: (<Image style={{ marginLeft: 18 * scale, width: 9 * scale, height: 16 * scale }} source={require('../../imgs/goBackEmpty.png')} />),
			headerStyle: style.head.headerStyle,
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center',
			}
		}
	};
	constructor(props) {
		super(props);
		this.ruleItemList = this.props.navigation.state.params.ruleItemList;
		this.attachmentFileList = this.props.navigation.state.params.attachmentFileList;
		console.log(this.ruleItemList)
		this.state = {
			tabIndex: 0,
			state: {
				tableHead: ['全选', '企业性质', '区域/地区', '返利等级（月/吨）', '返利金额（元/吨）',],
				widthArr: [40 * scale, 80 * scale, 80 * scale, 340 * scale, 150 * scale],
				dataWidthArr: [100 * scale, 40 * scale, 60 * scale, 40 * scale, 100 * scale, 150 * scale]
			},
		}
		this.companyTypeNames = []
		this.regionNames = []
		this.data = []
		this.dataItemLen = []
		this.TAB = [
			{
				name: '规则内容',
				id: 0,
			}, {
				name: '附件',
				id: 1,
			}
		]

	}
	async componentWillMount() {
		await this._initPage();

	}

	// 初始化数据
	_initPage = async () => {
		this.ruleItemList ? this.format(this.ruleItemList) : null
	}
	format = (ruleItemList) => {
		let tableData = []
		let arrItem = []
		ruleItemList.map(item => {
			arrItem = [
				!isEmpty(item.minQuantity) ? item.minQuantity + '吨' : '-',
				!isEmpty(item.minQuantity) ? '≤' : '-',
				item.referTypeName, !isEmpty(item.maxQuantity) ? '<' : '-',
				!isEmpty(item.maxQuantity) ? item.maxQuantity + '吨' : '-',
				MethodUtil.toThousands(item.rebatePrice || 0, 2) || '-'
			]
			const index = tableData.findIndex(it => item.companyType === it.companyType && item.regionCode === it.regionCode)
			if (index !== -1) {
				tableData[index].data.push(
					arrItem
				)
			} else {
				tableData.push({ ...item, data: [arrItem] })
			}
		})
		tableData = tableData.sort((a, b) => a.companyType - b.companyType)
		tableData.forEach((item) => {
			this.companyTypeNames.push(item.companyTypeName)
			this.regionNames.push(item.regionName)
			this.dataItemLen.push(item.data.length)
			this.data.push(...item.data)
		})
		this.setState({ ls: true })
	}

	//切换
	_tabFn = (tabIndex) => {
		this.setState({
			tabIndex,
		})
	}

	listOne = () => {
		const { state } = this.state
		let lenStyle = [], arrNum = []
		this.dataItemLen.map(item => {
			lenStyle.push(item * 40 * scale)
		})
		this.data.map((item, index) => {
			arrNum.push(index + 1)
		})

		return (
			<View style={styles.table}>
				<ScrollView horizontal={true}>
					<View>
						<Table borderStyle={{ borderWidth: 1, borderColor: '#ececec' }}>
							<Row data={state.tableHead} widthArr={state.widthArr} style={styles.header} textStyle={styles.text} />
						</Table>
						<ScrollView style={styles.dataWrapper}>
							<Table borderStyle={{ borderWidth: 1, borderColor: '#ececec' }}>
								<TableWrapper style={styles.wrapper}>
									<Col
										data={arrNum}
										style={{ backgroundColor: '#fff', width: 40 * scale }}
										textStyle={styles.text}
									>
									</Col>
									<Col
										data={this.companyTypeNames}
										heightArr={lenStyle}
										style={{ backgroundColor: '#fff', width: 80 * scale }}
										textStyle={[styles.text]}
									>
									</Col>
									<Col
										data={this.regionNames}
										heightArr={lenStyle}
										style={{ backgroundColor: '#fff', width: 80 * scale }}
										textStyle={[styles.text]}
									>
									</Col>
									<TableWrapper>
										{
											this.data.map((rowData, index) => (
												<Row
													key={index}
													data={rowData}
													widthArr={state.dataWidthArr}
													style={styles.row}
													textStyle={styles.text}
												/>
											))
										}
									</TableWrapper>
								</TableWrapper>
							</Table>
						</ScrollView>
					</View>
				</ScrollView>
			</View>
		)
	}
	listTwo = () => {
		return (
			<View style={{ marginTop: 25 * scale, paddingHorizontal: 20 * scale }}>
				{this.attachmentFileList ? this.attachmentFileList.map((item, index) => {
					return (
						<TouchableOpacity key={index} onPress={() => { this.props.navigation.navigate('ContractPdfPage', { finalFileId: item.fileId, title: item.fileName }) }}>
							<Text style={styles.fileText}>
								【{item.fileName}】
								</Text>
						</TouchableOpacity>
					)
				}) :
					<Text>暂无附件</Text>
				}
			</View>
		)
	}
	render() {
		let { tabIndex } = this.state
		return (
			<View style={styles.container}>
				<View style={styles.tabStyle}>
					{this.TAB.map((items, index) => {
						return (
							<TouchableOpacity key={index} onPress={() => { this._tabFn(index) }} style={{ flex: 1 }} key={index}>
								<Text style={[styles.tabItems, tabIndex == index ? styles.tabItemActive : null]}>{items.name}
								</Text>
							</TouchableOpacity>
						)
					})
					}
				</View>
				<ScrollView style={{ flex: 1 }}>
					{tabIndex == '0' ?
						this.listOne()
						: null
					}
					{tabIndex == '1' ?
						this.listTwo()
						: null
					}
				</ScrollView>
			</View>
		)

	}
}
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: style.color.white,
		// paddingBottom: 30 * scale
	},
	headTitleBox: {
		marginTop: -15 * scale,
		borderTopLeftRadius: 10 * scale,
		borderTopRightRadius: 10 * scale,
		borderWidth: 1 * scale,
		borderStyle: 'solid',
		borderColor: '#fff',
		backgroundColor: '#fff',
		width: '100%',
		flexDirection: 'row',
		justifyContent: 'space-around',
	},
	tabItems: {
		color: '#fff',
		fontSize: 14 * scale,
		textAlign: 'center',
		marginVertical: 10 * scale,
		opacity: .8,
		paddingRight: 5 * scale,
		paddingLeft: 5 * scale,
		paddingBottom: 10 * scale,
	},
	tabItemActive: {
		opacity: 1,
	},
	tabStyle: {
		backgroundColor: style.color.themeColor,
		flexDirection: 'row',
	},
	table: {
		flex: 1,
		backgroundColor: '#fff'
	},
	header: {
		height: 40 * scale,
		backgroundColor: '#f0f0f0'
	},
	text: {
		textAlign: 'center',
		color: '#000'
	},
	row: {
		height: 40 * scale,
		backgroundColor: '#fff'
	},
	wrapper: {
		flexDirection: 'row'
	},
	fileText: {
		fontSize: 14 * scale,
		fontWeight: '600',
		color: '#0091FF',
		marginBottom: 20 * scale,
	},
})